<template>
  <div class="wrap">
    <div class="bg-con">
      <div class="bg">
        <div class="avatar" v-if="isLogin">
          <img :src="user.avatar" />
          <p>{{ user.nickname }}</p>
        </div>
        <!-- 未登录时 -->
        <div class="avatar" @click="login" v-else>
          <img src="https://java.crmeb.net/static/images/f.png" alt="" />
          <p>请点击登录</p>
        </div>

        <div class="discount">
          <div class="discount-list" v-for="item in list" :key="item.id">
            <h3>{{ item.price }}</h3>
            <p>{{ item.title }}</p>
          </div>
        </div>
        <!-- 订单中心 -->
        <div class="order-center-con">
          <div class="order-look">
            <h3>订单中心</h3>
            <p>查看全部 &gt;</p>
          </div>
          <div class="order-center">
            <div class="type">
              <van-icon name="cart-o" color="#ff448f" size="30px" />
              <p>待付款</p>
            </div>
            <div class="type">
              <van-icon name="shopping-cart-o" color="#ff448f" size="30px" />
              <p>待发货</p>
            </div>
            <div class="type">
              <van-icon name="cart-circle-o" color="#ff448f" size="30px" />
              <p>待收获</p>
            </div>
            <div class="type">
              <van-icon name="cart-o" color="#ff448f" size="30px" />
              <p>待评价</p>
            </div>

            <div class="type">
              <van-icon name="cart-o" color="#ff448f" size="30px" />
              <p>售后/退款</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 登录时我的服务 -->
      <div class="login-myServe" v-if="isLogin">
        <h3>我的服务</h3>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in userList"
            :key="value.id"
            :icon="value.pic"
            :text="value.name"
          />
          <van-grid-item icon="service" text="联系客服" color="" />
        </van-grid>
      </div>

      <!-- 未登录时我的服务 -->
      <div class="my-serve" v-else>
        <h3>我的服务</h3>
        <div class="avatar-serve">
          <i class="iconfont icon-kefu"></i>
          <p>联系客服</p>
        </div>
      </div>
      <div class="logo" v-if="isLogin">
        <img src="@/assets/images/support.png" alt="" />
      </div>
      <div class="logo" v-else>
        <img src="@/assets/images/support.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CrmebMyView",

  data() {
    return {
      list: [
        { id: 0, title: "余额", price: 0 },
        { id: 1, title: "积分", price: 0 },
        { id: 2, title: "优惠卷", price: 0 },
        { id: 3, title: "收藏", price: 0 },
      ],
      isLogin: false,
      user: {}, //
      userList: [], // 登录时我的服务
    };
  },

  methods: {
    login() {
      // this.$router.push("./LoginPage");
      this.$store.commit("setUrl", this.$route.path);
      console.log(this.$store.state.beforeUrl);
      this.$router.push({
        name: "LoginPage",
      });
    },
  },
  async created() {
    const token = sessionStorage.getItem("token") || undefined; // 声明token

    // 余额 积分 优惠卷 收藏
    if (token) {
      this.isLogin = true;
      await this.$requestTools("/crmeb/user", "GET", {
        headers: {
          "authori-zation": token,
        },
      }).then((data) => {
        this.user = data.data.data;
        this.list[0].price = this.user.nowMoney;
        this.list[1].price = this.user.integral;
        this.list[2].price = this.user.couponCount;
        this.list[3].price = this.user.collectCount;
        console.log(this.user);
      });
    }

    // 我的服务
    if (token) {
      this.isLogin = true;
      await this.$requestTools("/crmeb/menu/user", "GET", {
        headers: {
          "authori-zation": token,
        },
      }).then((data) => {
        this.userList = data.data.data.routine_my_menus;
        console.log(this.userList);
      });
    }
  },
};
</script>

<style lang="scss">
.wrap {
  width: 100%;
  height: 100vh;
  background-color: #eee;
  .bg-con {
    background: -webkit-linear-gradient(270deg, #ff448f, #f5f5f5);
    overflow-y: scroll;
    height: calc(100vh - 50px);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .bg {
      width: 100%;
      // height: 210px;
      background: url("@/assets/images/user_bg.5f1bcaae.png") no-repeat;
      background-size: 100%;
      .avatar {
        margin-top: 15px;
        display: flex;
        img {
          border-radius: 60px;
          width: 60px;
          height: 60px;
        }
        p {
          margin-left: 10px;
          margin-top: 15px;
          color: white;
        }
      }
      .discount {
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
        .discount-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          h3 {
            color: #fff;
          }
          p {
            color: #fff;
            font-size: 12px;
            margin-top: 5px;
          }
        }
      }
      /* 订单中心 */
      .order-center-con {
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 29px;
        .order-look {
          display: flex;
          justify-content: space-between;
          h3 {
            font-size: 14px;
            margin-left: 7px;
            font-weight: normal;
            color: #282828;
          }
          p {
            color: #ccc;
          }
        }
        .order-center {
          margin-top: 15px;
          display: flex;
          justify-content: space-around;
          .type {
            display: flex;
            flex-direction: column;
            align-items: center;
            p {
              color: #333;
              margin-top: 5px;
              font-size: 12px;
            }
          }
        }
      }
    }

    /* 登录时我的服务  */
    .login-myServe {
      background-color: #fff;
      margin-top: 15px;
      border-radius: 5px;
      h3 {
        padding: 10px 0 0px 18px;
        font-size: 14px;
        font-weight: normal;
        color: #282828;
      }
    }
    /* 未登录时我的服务 */
    .my-serve {
      background-color: #fff;
      padding: 15px 10px;
      width: 100%;
      box-sizing: border-box;
      margin: 50px auto 0;
      border-radius: 10px;
      .avatar-serve {
        margin: 15px 0 10px 0;
        i {
          font-size: 24px;
          color: #ff448f;
          text-align: center;
          margin-left: 10px;
        }
        p {
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
    /* 底部logo */
    .logo {
      // display: flex;
      // justify-content: center;   图片居中
      margin-top: 30px;
      img {
        width: 109px;
        height: 37px;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
</style>
